const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    plugins: [
        // 清除 dist 的文件夹
        new CleanWebpackPlugin(['dist']),
        // 生成模板
        new HtmlWebpackPlugin({
            template:`./src/page/index.html`,
            filename:'index.html',
            // js放在文件底部
            inject:true
        }),
        // 热更新
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: './js/[name].js',
        path: path.resolve(__dirname, '../dist')
    },
    // 热更新服务器
    devServer: {
        contentBase: './dist',
        hot: true,
        host: 'localhost',
        port: 9000
    },
    // 解析
    resolve: {
        // 别名配置
        alias: {
            '@': path.resolve(__dirname, 'src/')
        }
    }
};

// //修改webpack.base.conf.js代码
// // 获取html-webpack-plugin参数的方法
// var getHtmlConfig = function(name, chunks) {
//     return {
//         template: `./src/pages/${name}/index.html`,
//         filename: `${name}.html`, // favicon: './favicon.ico',
//         // title: title,
//         inject: true,
//         hash: true, //开启hash  ?[hash]
//         chunks: chunks, //页面要引入的包
//         minify: process.env.NODE_ENV === "development" ? false : {
//             removeComments: true, //移除HTML中的注释
//             collapseWhitespace: true, //折叠空白区域 也就是压缩代码
//             removeAttributeQuotes: true, //去除属性引用
//         },
//     };
// };
// //配置页面
// const htmlArray = [{
//     _html: 'index',
//     title: '首页',
//     chunks: ['vendor', 'index']
//     //页面用到的vendor模块
// },
// {
//     _html: 'login',
//     title: '登录',
//     chunks: ['login']
// }, ];
// //自动生成html模板
// htmlArray.forEach((element) => {
//     module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
// })